<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <div class="app-page-padding">
      <div class="app-section" style="padding:200px;">
        <div class="rs-3d-transform">
          <div class="base"></div>
          <div class="front"></div>
          <div class="back"></div>
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
        </div>
      </div>
      <div class="app-section">
        <!-- bidirectional data binding（双向数据绑定） -->
        <codemirror v-model="code" :options="cmOptions"></codemirror>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StyleButton',
  data () {
    return {
      code: `
.rs-3d-transform {
  width: 2em;
  height: 2em;
  /* background-color: rgba(0, 0, 0, .5); */
  transform-style: preserve-3d;
  /* transform: rotateX(-30deg) rotateY(30deg); */
  position: relative;
  font-size: 200px;
  animation: spin 10s linear 0s infinite;
}
.rs-3d-transform div {
  border: solid 1px #000;
  box-sizing: border-box;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  width: 2em;
  height: 2em;
  background-size: cover;
}
.rs-3d-transform .base {
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
}
.rs-3d-transform .front {
  background-image: url("~@/assets/3d/1.jpg");
  transform: translateZ(1em);
}
.rs-3d-transform .back {
  background-image: url("~@/assets/3d/2.jpg");
  transform: translateZ(-1em);
}
.rs-3d-transform .left {
  background-image: url("~@/assets/3d/3.jpg");
  transform: rotateY(90deg) translateZ(1em);
}
.rs-3d-transform .right {
  background-image: url("~@/assets/3d/4.jpg");
  transform: rotateY(90deg) translateZ(-1em);
}
.rs-3d-transform .top {
  background-image: url("~@/assets/3d/5.jpg");
  transform: rotateX(90deg) translateZ(1em);
}
.rs-3d-transform .bottom {
  background-image: url("~@/assets/3d/6.jpg");
  transform: rotateX(90deg) translateZ(-1em);
}
@keyframes spin {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
      `,
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'sass',
        theme: 'darcula',
        lineNumbers: true,
        line: true
        // more codemirror options, 更多 codemirror 的高级配置...
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.rs-3d-transform {
  width: 2em;
  height: 2em;
  /* background-color: rgba(0, 0, 0, .5); */
  transform-style: preserve-3d;
  /* transform: rotateX(-30deg) rotateY(30deg); */
  position: relative;
  font-size: 200px;
  animation: spin 10s linear 0s infinite;
}
.rs-3d-transform div {
  border: solid 1px #000;
  box-sizing: border-box;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  width: 2em;
  height: 2em;
  background-size: cover;
}
.rs-3d-transform .base {
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
}
.rs-3d-transform .front {
  background-image: url("~@/assets/3d/1.jpg");
  transform: translateZ(1em);
}
.rs-3d-transform .back {
  background-image: url("~@/assets/3d/2.jpg");
  transform: translateZ(-1em);
}
.rs-3d-transform .left {
  background-image: url("~@/assets/3d/3.jpg");
  transform: rotateY(90deg) translateZ(1em);
}
.rs-3d-transform .right {
  background-image: url("~@/assets/3d/4.jpg");
  transform: rotateY(90deg) translateZ(-1em);
}
.rs-3d-transform .top {
  background-image: url("~@/assets/3d/5.jpg");
  transform: rotateX(90deg) translateZ(1em);
}
.rs-3d-transform .bottom {
  background-image: url("~@/assets/3d/6.jpg");
  transform: rotateX(90deg) translateZ(-1em);
}
@keyframes spin {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
</style>
